<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--首先以淘宝为测试案例-->
 <!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding: 0;
    }
	a{
		text-decoration: none;
	}
    div{
      width:10rem;
      height: 1rem;
      background-color: red;
	  margin: 0 auto;
    }
  </style>
</head>
<body>
  <div></div>
  <p><a href="https://www.cnblogs.com/lyzg/p/4877277.html">这里是一篇博客，博主从网易与淘宝的font-size思考前端设计稿与工作流</a></p>
  <noscript>不支持js的浏览器是不完整的浏览器</noscript>
<!-- js动态的改变body上的font-size属性，举个例子：
在iphone6上动态设置了body font-size：37.5px 那么只需要写10rem就是一个全屏，如果设计图给的正好是750的设计图，750 = 10rem的比例换算就行了 -->
  
<!--  ldyx:
网易的：
  var deviceWidth = document.documentElement.clientWidth;
  if(deviceWidth > 640) deviceWidth = 640;
  document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';//这里也可以改成跳转PC端网站 
  -->
<script type="text/javascript">
	/*
	不管是哪一家
	 rem的适配总结一下就两部步
	 一、head里面加<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">作用：移动端视口的设置
	 二、引入适配文件，一种是js利用resize监听屏幕变化然后根据设计图纸进行比例换算，一种是CSS3 Media Queries，也就是css里面的@media screen and (max-width: ???px);
	 知识点回顾:
	 1.rem em px
		px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
		em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
		rem是CSS3新增的一个相对单位（root em，根em）
	问题：
		rem跟em的区别
			区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
			目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小；
			栗子：p {font-size:14px; font-size:.875rem;}
	 2.为什要加入viewport，它是什么?	 
		手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，
		这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），
		用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，
		让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。	 
		<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
			width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
			height：和 width 相对应，指定高度
			initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
			maximum-scale：允许用户缩放到的最大比例
			minimum-scale：允许用户缩放到的最小比例
			user-scalable：用户是否可以手动缩放 
		菜鸟教程的讲解以及更多参数：https://www.runoob.com/tags/tag-meta.html
		再回头看看上面的设置：把设备的宽度给了窗口，还设置了初始化缩放比例为1，缩放大小为1，
		你也可以设置user-scalable="no"也就是禁止缩放；
		viewport细化讲解：这篇博主阅读量多推给大家：https://www.cnblogs.com/2050/p/3877280.html；
	 3.怎么换算适配
	 1.通过resize监听窗口变化
	 2.获取可视窗户宽度，
	 3.比例换算	 
		网页可见区域宽： document.body.clientWidth;
		网页可见区域高： document.body.clientHeight;
		网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
		网页可见区域高： document.body.offsetHeight  (包括边线的宽);
		网页正文全文宽： document.body.scrollWidth;
		网页正文全文高： document.body.scrollHeight;
		网页被卷去的高： document.body.scrollTop;
		网页被卷去的左： document.body.scrollLeft;
		网页正文部分上： window.screenTop;
		网页正文部分左： window.screenLeft;
		屏幕分辨率的高： window.screen.height;
		屏幕分辨率的宽： window.screen.width;
		屏幕可用工作区高度： window.screen.availHeight;
		屏幕可用工作区宽度：window.screen.availWidth;	  
	*/
	window.onresize=function(){
		/*单单看调用方式就晓得，一个是window的属性一个是document；*/
		var clientWidth=document.body.clientWidth;
		var availWidth=window.screen.availWidth;
		console.log(`availWidth：${availWidth}，clientWidth：${clientWidth}`);
/* bbyx:
		如果不清楚这两个的意思可以打开控制台，如果你的调试工具在右侧；
		你会发现availWidth不变，clientWidth变小了，为什么呢？因为控制台占用一部分使得你的document可见区域占用了一部分
		现在是不是更好理解上面说的window属性跟document了？
	ps：废话三千，只为时刻提醒我只是只小白鸡！
*/
	}
</script> 
</body>
</html>
